<template>
  <div>
    <el-row>
      <el-col :span="24">

        <h2>个人中心<van-icon name="setting-o"  @click="seting()"/></h2>
        <div class="product-image-container">
          <img :src="user.imageurl" alt="头像" class="product-image" height="120px">
        </div>
        <div class="product-info-container">
          <span class="product-points">{{ user.name }}</span>
          <span class="product-value">{{ user.phone }}</span><br>
<!--          <div class="jiantou">-->
<!--            <p @click="toPersonalProfile">></p>-->
<!--          </div>-->
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <van-badge >
          <span class="product-points">我的积分 <span class="da">{{user.score}}</span> 分</span>
          <van-button type="info" size="small">刷新积分</van-button>
        </van-badge>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <h3>我的订单 <span @click="toOrder">全部订单</span></h3>
        <van-grid :column-num="4">
          <van-grid-item icon="shopping-cart-o" text="待支付"></van-grid-item>
          <van-grid-item icon="clock-o" text="待发货"></van-grid-item>
          <van-grid-item icon="package" text="待收货"></van-grid-item>
          <van-grid-item icon="checkmark-circle-o" text="已完成"></van-grid-item>
        </van-grid>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <van-cell title="积分收支明细"></van-cell>
        <van-cell title="积分兑换记录"></van-cell>
        <van-cell title="帮助中心"></van-cell>
        <van-cell title="意见反馈"></van-cell>
        <van-cell title="联系客服"></van-cell>
        <van-cell title="关于我们"></van-cell>
      </el-col>
    </el-row>
    <!-- 新增的固定按钮容器 -->
    <div class="fixed-button-container">
      <div class="exchange-condition-container">
        <el-button type="primary" size="small" @click="exchange('points')">积分兑换</el-button>
        <el-button type="primary" size="small" @click="exchange('code')">兑换码兑换</el-button>
      </div>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/show">积分商城</van-tabbar-item>
      <van-tabbar-item icon="search">扫一扫</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="myShow">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {Toast} from "vant";
import axios from "axios";

export default {
  data() {
    return {
      imageurl:"",
      active: 2,
      product: {},
      user:{},
    };
  },
  methods: {
    toPersonalProfile(){
      this.$router.push({path: '/PersonalProfile'})
    },
    toOrder(){
      this.$router.push({path:'/OrderPage'})
    },
    seting(){
      Toast('设置')
      this.$router.push({path: '/seting'})
    },
  },
  mounted() {

    var user = localStorage.getItem('user');
    if (user) {

      this.user = JSON.parse(user);
      this.imageurl = this.user.image
      console.log("user=", this.user);
    }
  }
};
</script>

<style scoped>
.jiantou{
  margin-left: 390px;
  margin-top: -40px;
}
.head{
  background-color: #ef6c6c;
  color: #ffffff;
}
.aa{
  text-align: center;
  color: #000000;
  font-size: 20px;
}
.da{
  font-size: 30px;
}
.product-image-container {
  text-align: center;
  margin-bottom: 10px;
  float: left;
}
</style>
